<template>
	<view class="container">
		<view class="tabs">
			<view :class="{'tab': true, 'active': activeTab === 0}" @click="switchTab(0)">景区介绍</view>
			<view :class="{'tab': true, 'active': activeTab === 1}" @click="switchTab(1)">入园信息</view>
			<view :class="{'tab': true, 'active': activeTab === 2}" @click="switchTab(2)">游玩指南</view>
		</view>

		<view class="content">
			<p class="section-title">景区介绍</p>
			<p class="section-content">
				故宫是中国乃至世界上保存较为完整、规模较大的木质结构古建筑群。 </p>
			<p class="section-content">
				这些金碧辉煌的建筑群可以分为“外朝”与“内廷”两大部分。以乾清门为界，乾清门以南为外朝，是皇帝处理政务的地方，乾清门以北为内廷，住着后宫嫔妃，是皇帝家庭生活之所。走过金銮殿、乾清宫、坤宁宫，在皇帝的御花园里赏弄花花草草，感觉好像穿越到了古装剧里。
			</p>
			<p class="section-content">
				故宫内珍藏有大量珍贵文物，据统计有上百万件。以文物的种类不同，分为多个展馆。其中珍宝馆和钟表馆很是引人注目，钟表馆每天11点和14点有钟表演示，可以看到清王朝珍藏的各种造型奇特的珍奇机械钟表，一定令你眼界大开。
			</p>
			<p class="section-title">入园信息</p>
			<h5>开放时间</h5>
			<uni-table>

				<uni-tr v-for="(item, index) in tableData" :key="index" :class="{'odd-row': index % 2 == 0}">
					<uni-td>{{ item.date }}</uni-td>
				</uni-tr>
			</uni-table>
			<p class="tip">
				法定节假日周一不闭馆；停止入园时间含钟表馆、珍宝馆
			</p>
			<h5>优待政策</h5>
			<uni-table class="table2" border>
				<uni-tr>
					<uni-th>适用人群</uni-th>
					<uni-th>适用条件</uni-th>
					<uni-th>优待政策</uni-th>
				</uni-tr>
				<uni-tr>
					<uni-td>未成年人</uni-td>
					<uni-td>18岁（不含）以下（有监护人陪同），需提前至官网预约</uni-td>
					<uni-td>免费</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td>老人</uni-td>
					<uni-td>60周岁（含）以上</uni-td>
					<uni-td>优惠</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td>学生</uni-td>
					<uni-td>大学生（含港、澳、台学生；不含成人教育、研究生）凭学生证或学校介绍信可购买学生/儿童票</uni-td>
					<uni-td>优惠</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td>残疾人</uni-td>
					<uni-td>凭残疾人证件</uni-td>
					<uni-td>免费</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td>军人</uni-td>
					<uni-td>“八一”建军节，现役军人凭有效证件</uni-td>
					<uni-td>免费</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td>离休干部</uni-td>
					<uni-td>凭离休证</uni-td>
					<uni-td>免费</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td>低保人员</uni-td>
					<uni-td>持有北京市城乡居民最低生活保障金领取证的人员凭有效证件</uni-td>
					<uni-td>半价</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td>女性</uni-td>
					<uni-td>三八“妇女节，女性观众享受</uni-td>
					<uni-td>半价</uni-td>
				</uni-tr>
			</uni-table>
		</view>
	</view>
</template>
<script setup>
	import {
		ref,
		reactive
	} from "vue"
	const activeTab = ref(0)

	const switchTab = (value) => {
		console.log(value)
		console.log(activeTab)
		activeTab.value = value
	}
</script>
<style>
	.table2 {
		width: 100%
	}

	.tabs {
		width: 100%;
		display: flex;
		background-color: #fff;
		border-radius: 5px;
		justify-content: space-evenly;
		margin-bottom: 10px;
		font-size: 30rpx;
	}

	.container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: auto;
	}

	.content {
		padding: 10px;
	}

	.uni-table {
		border: 2px solid #f0f0f0;
		margin-top: 10px;
	}

	.tip {
		background-color: #EFEFEF;
		padding: 10px;
		margin: 20px 0;
		font-size: 14px;
		color: #666B6E;
	}

	.active {
		font-weight: 600;
		border-bottom: 2px solid #4676EE;
	}

	.tab {
		/* flex: 1; */
		text-align: center;
		padding: 10px 0;
		cursor: pointer;
		margin-left: 60rpx;
	}


	.section-title {
		margin: 20px 0;
		font-weight: 600;
	}



	.section-content {
		margin: 20px 0;
	}

	.uni-table {
		width: 100%;
		border-collapse: collapse;
	}



	.odd-row {
		background-color: #f0f0f0;
	}

	.uni-th,
	.uni-td {
		border: 1px solid #ccc;
		padding: 10px;
		text-align: center;
	}
</style>